An Exciting New World

In this lesson, we explore a few different loading strategies for an e-commerce app.

On the left, we have several different categories. By clicking different categories, we load a different subset of shoes. We get the category from the URL, which uses a dynamic segment, /shop/[categorySlug].

In a real app, this would involve a database query, but we're once again faking it in JS. This is unrealistically speedy, so I added an artificial delay:

export async function getShoesForCategory(category) {
  await delay(2000);

  return SHOES.filter((shoe) =>
    shoe.categories.includes(category.toLowerCase())
  );
}

const delay = (ms) =>
  new Promise((resolve) => setTimeout(resolve, ms));

With this 2-second delay, the user experience is terrible; the user stares at a blank white screen while we wait for the shoes to load:

In this video, we explore two separate solutions in depth:

1. The “classic” approach, using SWR
2. A fancy new approach, using modern Next features and React Suspense

This isn't really the sort of video I know how to transcribe effectively. I strongly encourage you to watch the whole thing, to see how I implement the two different approaches, and to see the results!